import React, { Component } from "react";
import "./5.css";
export default class ColorPicker extends Component {
  // 1. 声明状态
  state = {
    r: 0,
    g: 0,
    b: 0,
  };
  //input 元素的 onchange 事件回调
  change = (type) => {
    return (e) => {
      //更新状态
      this.setState({
        [type]: e.target.value,
      });
    };
  };

  render() {
    // 解构赋值
    let { r, g, b } = this.state;
    return (
      <div className="color-container">
        {/* 用来显示颜色 */}
        <div
          className="color-show"
          style={{ backgroundColor: `rgb(${r},${g},${b})` }}
        ></div>
        <hr />
        {/* 用来调整颜色 */}
        <div className="color-control">
          R:{" "}
          <input
            type="range"
            min="0"
            max="255"
            value={r}
            onChange={this.change("r")}
          />
          <br></br>
          G:{" "}
          <input
            type="range"
            min="0"
            max="255"
            value={g}
            onChange={this.change("g")}
          />
          <br></br>
          B:{" "}
          <input
            type="range"
            min="0"
            max="255"
            value={b}
            onChange={this.change("b")}
          />
          <br></br>
        </div>
        <hr />
        <input type="text" value={`rgb(${r},${g},${b})`} readOnly />
        <button onClick={() => {
          window.navigator.clipboard.writeText(`rgb(${r},${g},${b})`);
        }}>复制</button>
      </div>
    );
  }
}
